<template>
  <div class="message">
    <!-- 头部导航 -->
    <div class="title-nav">
      <!-- 消息 -->
      <div class="xiaoxi">{{ biaoti }}</div>
      <!-- 设置 -->
      <div class="right">
        <van-image
          width="33.5px"
          height="30px"
          :src="require('./../../../public/img/设置图标.png')"
          class="img1"
        />
        <!-- 我的图片 -->
        <span @click="showPopup"
          ><img src="../../../public/img/登录.png" alt=""
        /></span>
      </div>
    </div>
    <!-- 左侧弹出框 -->
    <van-popup
      v-model:show="show"
      position="left"
      :style="{ height: '100%', width: '85%' }"
      ><LeftPropWindow
    /></van-popup>
    <!-- 头部按钮 -->
    <van-tabs
      v-model:active="active"
      :animated="true"
      :sticky="true"
      line-width="30px"
      title-inactive-color="#A8A8A8"
      @click="shuchu"
    >
      <van-tab title="回复"><Reply /></van-tab>
      <van-tab title="通知"><Notice /></van-tab>
      <van-tab title="表态"><Stand /></van-tab>
      <van-tab title="关注"><Watch /></van-tab>
      <van-tab title="好友"><Friends /></van-tab>
    </van-tabs>
  </div>
</template>

<script>
// 导航内容组件
import Reply from "@/views/home/message/Reply.vue";
import Notice from "@/views/home/message/Notice.vue";
import Stand from "@/views/home/message/Stand.vue";
import Watch from "@/views/home/message/Watch.vue";
import Friends from "@/views/home/message/Friends.vue";
import LeftPropWindow from "@/views/home/LeftPropWindow.vue";

import { ref } from "vue";
export default {
  setup() {
    const active = ref(0);

    // 左侧弹出
    const show = ref(false);
    const showPopup = () => {
      show.value = true;
    };

    // 二级导航的标题
    const biaoti = ref("回复");

    const shuchu = (name, title) => {
      biaoti.value = title;
    };

    return {
      active,
      showPopup,
      show,
      shuchu,
      biaoti,
    };
  },
  components: {
    Reply,
    Notice,
    Stand,
    Watch,
    Friends,
    LeftPropWindow,
  },
};
</script>

<style lang="less">
.message {
  /* 头部导航 */
  .title-nav {
    height: 50px;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 16px;
    .xiaoxi {
      position: relative;
      right: 54px;
    }
    .right {
      position: relative;
      left: 54px;
      display: flex;
      align-items: center;
      .van-image__img {
        width: 33.5px;
        height: 30px;
      }
      span {
        margin-left: 14px;
      }
    }
  }

  // 左侧弹出内容
  .content_left {
    font-size: 14px;
    // 上
    .cl_on {
      width: 100%;
      padding: 15px 15px 5px 15px;
      background: url("./../../../public/img/背景图.png");
      background-size: 330px 160px;
      color: #fff;
      position: relative;
      // 左
      .clo_left {
        .username {
          margin: 0;
        }
        .qtxinxi {
          margin: 0;
          font-size: 12px;
          span {
            margin: 0 10px 0 4px;
          }
        }
      }
      // 二维码
      .code {
        position: absolute;
        right: 20px;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
    // 下
    .cl_bottom {
      ul {
        li {
          &:nth-child(6) {
            margin-bottom: 20px;
          }
          width: 85%;
          padding: 11px 15px;
          .clb_img {
            margin-right: 20px;
            transform: translate(0, 3.5px);
          }
        }
      }
    }
  }

  // 头部按钮
  .van-tabs {
    .van-tabs__wrap {
      width: 100%;
      .van-tabs__nav {
        width: 80%;

        .van-tabs__line {
          background: #14b8c7;
        }
      }
    }
  }
}
</style>
